<template>
  当前时间{{ hours }}:{{ minutes }}:{{ seconds }}
  <el-alert type="success" class="mt-1">isActive:{{ isActive }}</el-alert>
  <el-space class="mt-1">
    <el-button type="primary" size="small" @click="resume">resume</el-button>
    <el-button type="primary" size="small" @click="pause">pause</el-button>
  </el-space>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useIntervalFn } from '@vueuse/core';
const minutes = ref(0);
const seconds = ref(0);
const hours = ref(new Date().getHours());

const { pause, resume, isActive } = useIntervalFn(
  () => {
    const date = new Date();
    seconds.value = date.getSeconds();
    minutes.value = date.getMinutes();
    hours.value = date.getHours();
  },
  1000,
  {
    immediate: true,
    immediateCallback: true,
  }
);
</script>
